<template>
    <!-- <div class="article-item">文章列表项</div> -->
    <van-cell
      class="article-item"
      :to="{
          name: 'article',
          params: {
              articleId: article.art_id
          }
      }"
    >
        <div slot="title" class="title" van-multi-ellipsis--l3>{{ article.title }}</div>
        <div slot="label">
            <div
              class="cover-wrap"
              v-if="article.cover.type === 3"
            >
                <div class="cover-wrap-item"
                       v-for="(img,index) in article.cover.images"
                       :key="index">
                   <van-image
                      class="cover-item"
                      fit="cover"
                      :src="img"
                    /> 
                </div>
            </div>
            <div class="label-wrap">
                <span>{{ article.aut_name }}</span>
                <span>{{ article.comm_count }}评论</span>
                <span>{{ article.pubdate | relativeTime }}</span>
            </div>
        </div>
        <!-- 默认插槽的名字叫 default，可以省略 -->
        <van-image
        v-if="article.cover.type === 1"
          class="right-cover"
          fit="cover"
          :src="article.cover.images[0]"
        />
    </van-cell>
</template>

<script>
export default {
    name: 'ArticleItem',
    components: {},
    props: {
        article: {
            type: Object,
            required: true
        }
    },
    data () {
        return {}
    },
    computed: {},
    watch: {},
    created () {},
    mounted () {},
    methods: {}
}
</script>

<style scoped>
.title{
    font-size: 16px;
    color: #3a3a3a;
}
.van-cell__value{
    flex: unset;
    width: 116px;
    height: 73px;
    margin-left: 6px;
}
.right-cover{
    width: 116px;
    height: 73px;
}
.cover-wrap{
    display: flex;
}
.cover-wrap-item{
    padding: 15px 0;
    flex: 1;
    height: 73px;
    padding-right: 4px;
}
.cover-wrap-item:last-child{
    padding-right: 0px;
}
.cover-item{
    width: 100%;
    height: 73px;
}
.label-wrap{
    font-size: 11px;
    color: #b4b4b4;
}
.label-wrap span{
    margin-right: 12px;
}
</style>